<template>
	<view class="page">
		<view class="info">
			<view class="block-180 mr-24">
				<fu-image radius="16rpx" :src="logo" mode="aspectFill"></fu-image>
			</view>
			<view class="flex flex-direction overHidden">
				<view class="text-lg text-333 text-cut" v-if="order_sn">订单编号: {{order_sn }}</view>
				<!-- <view class="text-lg text-333 text-cut" v-if="server_no">服务编号: {{server_no }}</view> -->
				<view class="text-sm text-666 mt-24">物流公司: {{express_name}}</view>
				<view class="text-sm text-666 mt-16">
				物流单号: {{express_no}}
				<text v-if="express_no" @click="copyOrderSn(express_no)" class="text-blue margin-left-sm " space="emsp">复制</text>
				</view>
			</view>
		</view>
		<view class="status-box"></view>
		<!-- 时间轴 -->
		<view class="timeline">
			<view class="h-100 plr-24">
				<view class="h-100 solid-bottom flex align-center">
					<view class="title-badge"></view>
					<view class="text-lg text-333">物流详情</view>
				</view>
			</view>
			<view class="line-box" v-if="physical.length != 0">
				<block v-for="(item,index) in physical" :key="index">
					<view class="line-item flex">
						<view class="flex flex-direction justify-start align-center mr-24">
							<view class="dot-shadow">
								<view class="dot"></view>
							</view>
							<view class="line"></view>
						</view>
						<view>
							<view class="title">{{item.AcceptStation}}</view>
							<view class="sub-title">{{item.AcceptTime}}</view>
						</view>
					</view>
				</block>
			</view>
			<fu-empty-ui v-else pagingListNoListDataText="暂无物流信息" emptyImage="message"></fu-empty-ui>
		</view>
		<!-- 无数据 -->
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_sn: null,
				express_name: '',
				express_no: '',
				physical: [], // 物流信息
				logo: '', //
				server_no: ''
			};
		},
		onLoad(options) {
			const {
				order_sn,
				server_no
			} = options;
			// 正常物流
			if (order_sn) {
				this.order_sn = order_sn;
			}
			// 退货物流
			if (server_no) {
				this.server_no = server_no;
			}
			this.getData();
		},
		methods: {

			/**
			 * @description 复制物流订单号
			 * @param {String} sn = 物流单号
			 */
			copyOrderSn(sn) {
				// #ifdef H5
				return this.$message.info('请在手机端操作');
				// #endif
				uni.setClipboardData({
					data: sn,
					success: () => {
						this.$message.info('复制成功');
					}
				});
			},
			getData() {
				let data = {};
				if (this.order_sn) {
					data.order_sn = this.order_sn;
				}
				if (this.server_no) {
					data.server_no = this.server_no;
				}
				this.$api.post(global.apiUrls.postOrderLogs, data)
					.then(res => {
						console.log("物流信息", res.data);
						if (res.data.code == 1) {
							this.express_name = res.data.data.ShipperCode;
							this.express_no = res.data.data.LogisticCode;
							this.logo = res.data.data.logo;
							this.physical = res.data.data.Traces.reverse();
							console.log(this.logo)
						} else {
							this.$message.info(res.data.msg);
						}
					})
			},
			// #ifndef H5
			// 复制快递号
			copy() {
				uni.setClipboardData({
					data: this.express_no,
					success: () => {
						this.$message.info('复制成功');
					}
				});
			},
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #FFFFFF;

		.info {
			height: 244rpx;
			padding: 32rpx 24rpx;
			background-color: #FFFFFF;
			display: flex;
		}
	}

	.title-badge {
		width: 6rpx;
		height: 30rpx;
		background: #FC6497;
		border-radius: 6rpx;
		margin-right: 24rpx;
	}

	.timeline {
		background-color: #FFFFFF;

		.line-box {
			padding: 32rpx 24rpx;

			.line-item {
				min-height: 146rpx;

				.dot-shadow {
					width: 26rpx;
					height: 26rpx;
					background-color: rgba(153, 153, 153, 0.2);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-shrink: 0;
					transform: translateY(4rpx);

					.dot {
						width: 14rpx;
						height: 14rpx;
						background-color: #BFBFBF;
						border-radius: 14rpx;
					}
				}

				.line {
					height: 100%;
					border-left: 2rpx dashed #DDDDDD;

				}

				.title {
					font-size: 28rpx;
					color: #999999;
				}

				.sub-title {
					font-size: 24rpx;
					color: #BFBFBF;
					line-height: 1;
					margin-top: 24rpx;
					margin-bottom: 60rpx;
				}


			}

			.line-item:first-child {
				.dot-shadow {
					background-color: rgba(214, 74, 15, 0.2);

					.dot {
						background-color: #FF6464;
					}
				}

				.title {
					color: #333333;
				}

				.sub-title {
					color: #333333;
				}
			}

			.line-item:last-child {
				.line {
					display: none;
				}
			}
		}
	}

	.status-box {
		height: 20rpx;
		background-color: #F8F8F8;
	}

	.block-180 {
		width: 180rpx;
		height: 180rpx;
		flex-shrink: 0;
	}

	.mr-24 {
		margin-right: 24rpx;
	}

	.mt-24 {
		margin-top: 24rpx;
	}

	.mt-16 {
		margin-top: 16rpx;
	}

	.h-100 {
		height: 100rpx;
	}

	.plr-24 {
		padding: 0 24rpx;
	}
</style>
